<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>站点信息管理</title>
    <link rel="stylesheet" href="/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/frame/static/css/style.css">
    <link rel="icon" href="/frame/static/image/code.png">
    <script type="text/javascript" src="/frame/layui/layui.js"></script>
</head>
<body class="body">


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>站点信息管理</legend>
</fieldset>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>编号</th>
        <th>地址</th>
        <th>资源分组</th>
        <th>资源类型</th>
        <th>创建时间</th>
        <th>修改时间</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="site:${sites}">
        <td th:text="${site.id}">1</td>
        <td><a href="#" th:href="@{${site.resources}}" th:text="${site.resources}" class="url">张英伟的博客</a></td>
        <td th:text="${site.group}">rss</td>
        <td th:text="${site.type}">java</td>
        <td th:text="${site.createdate}">1989-10-14 00:00:00</td>
        <td th:text="${site.updatedate}">1989-10-15 00:00:00</td>
        <td th:attr="data-flag=${site.flag}">
            <span th:if="${site.flag == 0}" class="layui-labek">初始</span>
            <span th:if="${site.flag == 1}" class="layui-labek">正常</span>
            <span th:if="${site.flag == 2}" class="layui-labek">失效</span>
            <span th:if="${site.flag == 9}" class="layui-labek">删除</span>
        </td>
        <td>
            <a class="layui-btn layui-btn-small btn-edit tg" th:attr="data-id=${site.id}" data-id="1">编辑</a>
            <a class="layui-btn layui-btn-small layui-btn-danger btn-edit black" th:attr="data-id=${site.id}" data-id="1">删除</a>
        </td>
    </tr>
    </tbody>
</table>
<div id="pageContent"></div>
<span id="pages" hidden th:text="${page.pages}"></span>
<span id="pagecurrent" hidden th:text="${page.currentPage}"></span>
<div id="editform" style="padding: 10px;" hidden>
    <form class="layui-form" action="">
        <input type="text" hidden value="" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" disabled id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">资源分组</label>
            <div class="layui-input-block">
                <input type="text" name="group" id="group" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">资源分类</label>
            <div class="layui-input-block">
                <input type="text" name="type" id="type" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="state" id="state">
                    <option value="1">正常</option>
                    <option value="9">删除</option>
                </select>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    // layui方法
    layui.use(['form','layer','laypage','jquery'], function(){
        var laypage = layui.laypage;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        $(".url").click(function () {
            var url = $(this).attr("data-href");
            var title = $(this).html();
            vipTab.add($(this),title,url);
        });
        /**
         * 编辑
         */
        $(".tg").click(function () {
            var id = $(this).attr("data-id");
            var title = $(this).parent().prev().prev().prev().prev().prev().prev().text();
            var group = $(this).parent().prev().prev().prev().prev().prev().text();
            var type = $(this).parent().prev().prev().prev().prev().text();
            var state = $(this).parent().prev().attr("data-flag");
            if(state != 1 && state != 9){
                layer.alert("此状态不可以编辑");
                return;
            }
            var from = $("#editform");
            from.find("#title").val(title);
            from.find("#group").val(group);
            from.find("#type").val(type);
            from.find("#state").val(state);
            from.find("#id").val(id);
            layer.open({
                type:1,
                title: "站点信息编辑",
                area:['600px','400px'],
                content: from,
                skin: "edit-siteinfo"
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    var index = layer.load(1);
                    var siteinfo = $(".edit-siteinfo");
                    var id = siteinfo.find("#id").val();
                    var title = siteinfo.find("#title").val();
                    var group  = siteinfo.find("#group").val();
                    var type = siteinfo.find("#type").val();
                    var state = siteinfo.find("#state").val();
                    var json = {
                        id: id,
                        title: title,
                        group: group,
                        type: type,
                        state: state
                    };

                    $.ajax({
                        type: "PUT",
                        url: "/sites",
                        data: json,
                        success: function (data) {
                            layer.close(index);
                            if(data && data.state === 200){
                                window.location.href = "/sites/pages/1";
                            }else{
                                layer.alert(data.message)
                            }
                        },
                        error: function () {
                            layer.close(index);
                        }
                    })
                }
                ,btn2: function(index, layero){
                    console.log("取消");
                }
                ,cancel: function(){
                    console.log("取消");
                }
            });
        })
        $(".black").click(function () {
            var id = $(this).attr("data-id");
//            layer.alert("黑名单 - " + id);
            var index = layer.load(1);
            $.ajax({
                type: "DELETE",
                url: "/sites/"+id,
                success: function (data) {
                    layer.close(index);
                }
            })
        });
        const pages = $("#pages").text();
        const curr = $("#pagecurrent").text();
        laypage({
            cont: 'pageContent'
            , pages: pages //总页数
            , groups: 3 //连续显示分页数
            ,skip: true //指定页码跳转
            ,curr: curr
            ,jump: function(obj, first){
                if(!first){
                    window.location.href = "/sites/pages/" + obj.curr;
                }
            }
        });
    })
</script>
</body>
</html>